<template>
<a-modal
  :title="title"
  :visible="show"
  :confirmLoading="load"
  :maskClosable="false"
  :footer="null"
  @ok="handleSave"
  @cancel="close"
>
  <a-steps :current="current">
    <a-step v-for="item in steps" :key="item.title" :title="item.title" />
  </a-steps>
  <a-form-model
    class="ant-advanced-form"
    ref="form"
    :model="data"
    :rules="rules"
  >
    <a-alert type="error" ref="alert" :closable="true" v-show="error" :message="error" @close="errorClose" showIcon style="margin: 12px 0px;" />
    <a-row :gutter="24" v-if="current === 0" style="margin-top:12px">
      <a-col :span="24">
        <a-form-model-item prop="tel">
          <a-input v-model="data.tel" placeholder="请输入手机号码" size="large"/>
        </a-form-model-item>
      </a-col>
      <a-col :span="24" prop="securityCode">
        <a-form-model-item>
          <a-row :gutter="8" style="margin: 0 -4px">
            <a-col :span="16">
              <a-input
                size="large"
                placeholder="验证码"
                v-model="data.securityCode"
              />
            </a-col>
            <a-col :span="8" style="padding-left: 4px">
              <a-button
                :loading="load"
                style="width: 100%;"
                size="large"
                htmlType="submit"
                type="primary"
                :disabled="msgDisable"
                @click="sendMsg"
              >
                {{ msgTxt }}
              </a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-button
          style="width: 100%;"
          size="large"
          htmlType="submit"
          type="primary"
          @click="checkCode"
        >
          下一步
        </a-button>
      </a-col>
    </a-row>
    <a-row v-if="current === 1" style="margin-top:12px">
      <a-col :span="24">
        <a-form-model-item prop="password">
          <a-input size="large" placeholder="密码" v-model="data.password" type="password" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item prop="repassword">
          <a-input size="large" placeholder="二次确认密码" v-model="data.repassword" type="password" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-button
          style="width: 100%;"
          size="large"
          htmlType="submit"
          type="primary"
          @click="forgot"
        >
          确定
        </a-button>
      </a-col>
    </a-row>
  </a-form-model>
</a-modal>
</template>

<script>
import {
  sendMsg,
  checkCode,
  forgot
} from '@/services/user'

export default {
  computed: {
    msgTxt () {
      return this.msgTime >= 0 ? `${this.msgTime}秒后重新获取` : '获取验证码'
    }
  },
  data () {
    return {
      current: 0,
      steps: [
        { title: '验证手机' },
        { title: '设置密码' }
      ],
      error: '',

      msgDisable: false,
      msgTime: -1,
      msgTimeId: undefined,

      show: false,
      load: false,
      title: '找回密码',
      data: {},
      rules: {
        tel: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        securityCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请输入二次确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.data.repassword !== this.data.password) {
                callback(new Error('请保持两次密码一致'))
                return
              }
              callback()
            },
            message: '请保持两次密码一致',
            trigger: 'blur'
          }
        ]
      }

    }
  },
  methods: {
    sendMsg () {
      this.$refs.form.validateField('tel', async (valid) => {
        if (valid === '') {
          const res = await sendMsg({ tel: this.data.tel })
          const { isSuccess, msg } = res
          if (isSuccess) {
            this.msgDisable = true
            this.msgTime = 60
            this.msgTimeId = setInterval(() => {
              this.msgTime--
              if (this.msgTime === -1) {
                clearInterval(this.msgTimeId)
                this.msgDisable = false
              }
            }, 1000)
          } else {
            this.setError(msg)
          }
        }
      })
    },
    checkCode () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await checkCode({
            username: this.data.tel,
            securityCode: this.data.securityCode
          })
          const { isSuccess, msg } = res
          if (isSuccess) {
            this.current++
          } else {
            this.setError(msg)
          }
        }
      })
    },
    forgot () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await forgot({
            username: this.data.tel,
            securityCode: this.data.securityCode,
            password: this.data.password
          })
          const { isSuccess, msg } = res
          if (isSuccess) {
            this.close()
          } else {
            this.setError(msg)
          }
        }
      })
    },
    open () {
      this.data = {}
      this.show = true
    },
    handleSave () {
      this.close()
    },
    setError (txt) {
      this.error = txt
      this.$refs.alert.closed = false
    },
    errorClose () {
      this.error = ''
    },
    close () {
      this.show = false
      this.load = false
      this.data = {}
      this.current = 0
    }
  }
}
</script>
